<template>
  <div class="history">
    <slot name="title"></slot>

    <div class="list">
      <li v-for="item, index in searchHistory" :key="index" @click="search(item)">
        {{ item }}
      </li>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue'
import { storeToRefs } from 'pinia';
import { PlayStore } from '@/store/playlist'
const $store = PlayStore();
let { searchHistory } = storeToRefs($store)

const emit = defineEmits(['onSearch'])


// 搜索
const search = (keywords) => {
  emit('onSearch', keywords)
}
</script>
  
<style lang='less' scoped>
.history {
  margin: 10px 0;

  .list {
    width: 100%;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;

    li {
      padding: 10px 20px;
      box-sizing: border-box;
      color: @font-fu;
      font-size: 20px;
      background-color: #FFF;
      max-width: 50%;
      border-radius: 40px;
      margin: 5px 10px;
    }
  }
}
</style>